<template>
  <div class="ai-plan">
    <el-card class="plan-header-card">
      <template #header>
        <div class="card-header">
          <el-icon><MagicStick /></el-icon>
          <span>AI种植方案推荐</span>
        </div>
      </template>
      <div class="plan-header-content">
        <el-button type="primary" @click="generatePlan">AI一键推荐</el-button>
        <el-button @click="compareDialogVisible = true">方案对比</el-button>
      </div>
    </el-card>

    <el-card class="plan-main-card">
      <template #header>
        <div class="card-header">
          <el-icon><DocumentChecked /></el-icon>
          <span>推荐方案</span>
        </div>
      </template>
      <div v-if="plan">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="作物结构">{{ plan.structure }}</el-descriptions-item>
          <el-descriptions-item label="预计总产量">{{ plan.yield }} 吨</el-descriptions-item>
          <el-descriptions-item label="预计收益">{{ plan.profit }} 万元</el-descriptions-item>
          <el-descriptions-item label="主要投入">{{ plan.input }}</el-descriptions-item>
          <el-descriptions-item label="AI建议">{{ plan.advice }}</el-descriptions-item>
        </el-descriptions>
        <div class="plan-actions">
          <el-button type="success" @click="applyPlan">一键应用方案</el-button>
        </div>
      </div>
      <div v-else class="empty-state">
        <el-icon><MagicStick /></el-icon>
        <div class="title">暂无推荐方案</div>
        <div class="desc">请点击"AI一键推荐"生成方案</div>
      </div>
    </el-card>

    <!-- 方案对比弹窗 -->
    <el-dialog v-model="compareDialogVisible" title="方案对比分析" width="600px">
      <el-table :data="compareList" style="width: 100%">
        <el-table-column prop="name" label="方案" width="120" />
        <el-table-column prop="structure" label="作物结构" />
        <el-table-column prop="yield" label="预计产量(吨)" width="120" />
        <el-table-column prop="profit" label="预计收益(万元)" width="120" />
        <el-table-column prop="advice" label="AI建议" />
      </el-table>
      <template #footer>
        <el-button @click="compareDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'AIPlantingPlan',
  data() {
    return {
      plan: null,
      compareDialogVisible: false,
      compareList: [
        {
          name: 'AI推荐方案',
          structure: '水稻40% 玉米30% 蔬菜20% 经济作物10%',
          yield: 320,
          profit: 95,
          advice: '结构均衡，风险低，适合本地气候',
        },
        {
          name: '传统方案',
          structure: '水稻60% 玉米20% 蔬菜10% 经济作物10%',
          yield: 300,
          profit: 85,
          advice: '水稻比例偏高，抗风险能力弱',
        }
      ]
    }
  },
  methods: {
    generatePlan() {
      // 使用模拟数据生成方案
      this.plan = {
        structure: '水稻40% 玉米30% 蔬菜20% 经济作物10%',
        yield: 320,
        profit: 95,
        input: '种子、化肥、农药、人工',
        advice: '结构均衡，风险低，适合本地气候和市场需求'
      }
      this.$message.success('AI推荐方案（模拟）已生成')
    },
    applyPlan() {
      this.$message.success('方案已应用到种植计划')
    }
  }
}
</script>

<style scoped>
.ai-plan {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}
.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.plan-header-content {
  display: flex;
  gap: 16px;
  align-items: center;
}
.plan-main-card {
  flex: 1;
}
.plan-actions {
  margin-top: 20px;
  text-align: right;
}
.empty-state {
  text-align: center;
  color: #909399;
  padding: 40px 0;
}
.empty-state .el-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}
.empty-state .title {
  font-size: 16px;
  margin-bottom: 8px;
}
.empty-state .desc {
  font-size: 14px;
  opacity: 0.8;
}
</style> 